<template>
  <view>
    <view class="addTeam">
      <!-- 正常入团 -->
      <view
        class="addItemActive"
        v-for="(item, index) in CheYoutuanList"
        :key="index"
        :style="{
          backgroundImage:
            item.type == '2' ? 'linear-gradient(to right, #fff, #fff), linear-gradient(90deg, #E49750, #fff)' : '',
        }"
        @click="item.status == '1' ? changeTab(item.name, item.id) : ''"
      >
        <view class="title">{{ item.name }}</view>
        <!-- 未成团显示 -->
        <view class="group" v-if="item.status != '1'">
          <view class="text_group">
            <text>您再邀请{{ 3 - item.driver_count }}人,即可成功创建车友团</text>
          </view>
          <view class="bot_group">
            <view v-if="item.driver_avatar">
              <image
                :src="item.driver_avatar[0] ? item.driver_avatar[0].avatar : '../../static/team/peo.png'"
                mode=""
                @click.stop="invitation(item.id)"
              ></image>
              <image
                :src="item.driver_avatar[1] ? item.driver_avatar[1].avatar : '../../static/team/peo.png'"
                mode=""
                @click.stop="invitation(item.id)"
              ></image>
              <image
                :src="item.driver_avatar[2] ? item.driver_avatar[2].avatar : '../../static/team/peo.png'"
                mode=""
                @click.stop="invitation(item.id)"
              ></image>
            </view>
            <view @click.stop="invitation(item.id)">邀请好友</view>
          </view>
        </view>
        <view class="images" v-if="item.status == '1'">
          <view class="image_list">
            <image v-for="(items, index) in item.driver_avatar" :key="index" :src="items.avatar" mode=""></image>
            <text>{{ item.driver_count }}人</text>
          </view>
          <uni-icons type="forward" size="20"></uni-icons>
        </view>
        <!-- 超级团 -->
        <view
          class="new_list"
          style="background:linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(244,232,199,0.13) 23%, rgba(244,232,199,0.11) 100%);"
          v-if="item.type == '2' && item.level_price.money"
        >
          <view class="image_top" style="width: 100rpx;">
            <image src="../../static/team/cjt.png" mode="" style="width: 90rpx;"></image>
            <view style="width: 80rpx;color: #E49750 ;margin-top: 3rpx;">超级团</view>
            <image src="../../static/team/hg.png" style="width: 44rpx;height: 29rpx;margin-top: 4px;"></image>
          </view>
          <view class="text_list">
            <view class="">
              钱包支付
              <text style="color:#E49750;">{{ item.level_price.money }}</text>
              <text>元/公斤</text>
            </view>
            <view class="">
              微信支付
              <text style="color: #E49750;">{{ item.level_price.wechat }}</text>
              <text>元/公斤</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="addTeam" v-if="CheYoutuanList.length < 1">
      <view
        class="addItemActive"
        style="background-image: linear-gradient(to right, #fff, #fff), linear-gradient(90deg, #E49750, #fff)"
      >
        <view
          class="new_list"
          style="background:linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(244,232,199,0.13) 23%, rgba(244,232,199,0.11) 100%);
	  margin:-25rpx 0px 0px -2rpx;height: 180rpx;height:auto;"
        >
          <view class="image_top" style="width: 140rpx;">
            <image src="../../static/team/h.png" mode="" style="width: 140rpx;border-radius: 5px 0px 0px 0px;"></image>
            <view style="width: 80rpx;color: #E49750 ;margin-top: 3rpx;left:0rpx">超级团</view>
          </view>
          <view class="column bots">
            <view>欢迎大型运输公司和物流公司达成战略合作</view>
            <view>
              设立
              <text>超级团</text>
              享最优价
            </view>
            <view>
              <text>洽谈热线</text>
              <uni-icons
                type="phone"
                size="22"
                color="#E49750"
                style="margin:0px 5rpx 0px 10rpx"
                @click="telCall('400-109-1606')"
              ></uni-icons>
              <text style="color: #E49750 ;" @click="telCall('400-109-1606')">400-109-1606</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 邀请弹框 -->
    <uni-popup ref="team" type="center" style="z-index: 910">
      <Invitation :invitationAll="invitationAll"></Invitation>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { Ref, ref } from 'vue';
import { toPublish } from '@mqtt';
import { Supertuan } from '@/gql/team';
import { getDriverID } from '@/stores/driverID';
import Invitation from '@c/team/invitation.vue';
import { navTo } from '@/utils/navigator';
import { telCall } from '@/utils/copyText';
/**
 * 车友团主页
 * @property {Number} driver_id 用户iD
 * @property {Array} CheYoutuanList 团列表
 * @property {Object} invitationAll 邀请弹框信息
 * @property {Null} team 邀请弹框
 */
const driver_id = getDriverID();
const CheYoutuanList = ref([]);
const invitationAll: Ref<any> = ref({});
const team = ref(null);
// refs
/**
 * 获取团列表
 * @param {string} code 城市code值
 */
function CheYoutuans(code:string) {
  const payload = {
    query: Supertuan,
    variables: {
      driver_id,
      code,
      type: 2,
    },
  };
  toPublish('ql/team/getSupTeamList', payload, (obj: any) => {
    uni.hideLoading();
    const { data } = obj;
    CheYoutuanList.value = data.get_sup_team_list;
  });
}
/**
 * 进入超级团详情页面
 * @param {string} name 团名称
 * @param {number} id 团id
 */
function changeTab(name:string, id:number) {
  navTo('team/superTeam?name='+name+'&id=' + id)
}
/**
 * 进入超级团分享页面
 * @param {number} id 团id
 */
function invitation(id:number) {
  navTo('team/invitation?id=' + id + '&type=' + 'SuperTeam')
}
defineExpose({
  CheYoutuans,
});
</script>

<style scoped lang="less">
@import url('../team/less/groupList.less');
</style>
